<template>
    <div>
        <el-table
            :data="goodsListData"
            style="width: 100%">
            <el-table-column label="商品id">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.goodsId }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品名">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.goodsName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品单价">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.goodsValue }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品总数量">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.goodsNumber }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品剩余数量">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.goodsNumberRemain }}</span>
                </template>
            </el-table-column>
            <el-table-column label="总金额">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.totalCost }}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="是否在售">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.onSale }}</span>
                </template>
            </el-table-column> -->
            <el-table-column label="操作" v-if="contract.fulfilled == 0">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger">
                        <span @click="handleDeleteFromContract(scope.$index, scope.row)">删除</span>
                    </el-button>
                </template>
            </el-table-column>
		</el-table>
    </div>
</template>

<script>
import {goodsFromContract, deleteGoodsFromContract} from '@/api/sale'
	export default {
		name: 'GoodsTable',
		data() {
            return {
                // 商品列表
                goodsListData: [],
                // 选中的合同商品信息
                goods: {}
            }
		}
		,props: ['goodsList', 'contract']
		,components: {
			// 包含组件
        },
		computed:{
			//计算属性
				
		},
		watch:{
			goodsList: function(n ,o){
                this.goodsListData = n
            }
		},
		created() {
            this.goodsListData = this.goodsList
        },
        methods: {
            // 获取合同商品列表
            getGoodsListByContractId(){
                goodsFromContract({contractId: this.goods.contractId})
                    .then(res => {
                        this.goodsListData = res.data.goodsList
                    })
            },
            // 删除合同商品
            handleDeleteFromContract(index, row){
                this.goods = row
                deleteGoodsFromContract({contractId: row.contractId, goodsId: row.goodsId})
                    .then(res => {
                        this.getGoodsListByContractId()
                    })
            }
        }
	}
</script>

<style scoped>
    
</style>